<template>
  <div class="container">
   
    <div :class="[flag ? 'message' : 'message1']" class="signup">
      <div :class="[flag ? 'btn-wrapper' : 'btn-wrapper1']">
        <button class="button" id="signup" @click="check">切换</button>
      </div>
    </div>
    <div class="form form--signup">
      <div class="form--heading">注册</div>
      <el-form
        @submit.prevent
        label-width="120px"
        class="RegisterForm sign-in-from"
        ref="ruleFormRefRegister"
        :model="registerUser"
        :rules="rules1"
      >
        <el-form-item class="elstyle" prop="account">
          <el-input
            class="inputs"
            type="text"
            placeholder="account"
            v-model="registerUser.account"
          />
        </el-form-item>
        <el-form-item class="elstyle" prop="password">
          <el-input
            class="inputs"
            type="password"
            placeholder="password"
            v-model="registerUser.password"
          />
        </el-form-item>
        <el-form-item class="elstyle" prop="name">
          <el-input
            class="inputs"
            type="text"
            placeholder="name"
            v-model="registerUser.name"
          />
        </el-form-item>
        <el-form-item class="elstyle" prop="userphone">
          <el-input
            class="inputs"
            placeholder="phone"
            v-model="registerUser.userphone"
          />
        </el-form-item>
        <button class="button"  v-loading.fullscreen.lock="loading" @click="submit_btn1(ruleFormRef1)">注册</button>
      </el-form>
    </div>
    <div class="form form--login">
      <div class="form--heading">登录</div>
      <el-form
       @submit.prevent
        label-width="120px"
        class="loginForm sign-in-from"
        ref="ruleFormRefLogin"
        :model="loginUser"
        :rules="rules"
      >
        <el-form-item class="elstyle" prop="account">
          <el-input
            class="inputs"
            type="text"
            placeholder="account"
            v-model="loginUser.account"
          />
        </el-form-item>
        <el-form-item class="elstyle" prop="password">
          <el-input
            class="inputs"
            type="password"
            placeholder="password"
            v-model="loginUser.password"
          />
        </el-form-item>
        <button class="button" @click="submit_btn(ruleFormRef)"  v-loading.fullscreen.lock="loading"
        element-loading-text="Loading..."
        >登录</button>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, ref, toRefs } from "vue";
import { FormInstance, ElMessage ,ElMessageBox} from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    let flag = ref(true);
    const check = () => {
      flag.value = !flag.value;
      ruleFormRefLogin.value.resetFields();
      ruleFormRefRegister.value.resetFields();
    };
    const router = useRouter(); //路由
    const store = useStore(); //vuex仓库
    const signUpMode = ref(false);
    const ruleFormRefLogin = ref();
    const ruleFormRefRegister = ref();
    const loading=ref(false)
    /**登录对象 */
    const loginUser = reactive({
      account: "",
      password: "",
    });
    /**注册对象 */
    const registerUser = reactive({
      account: "",
      password: "",
      name: "",
      userphone: "",
      avatar:""
    });
    
    /**登录校验规则 */
    const rules = reactive({
      account: [
        { required: true, message: "账号不能为空", trigger: "blur" },
        {
          min: 5,
          max: 12,
          message: "账号长度应在5-12之间",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 6, max: 12, message: "密码长度应在6-12之间", trigger: "blur" },
      ],
    });
/**注册校验规则 */
    const rules1 = reactive({
      account: [
        { required: true, message: "账号不能为空", trigger: "blur" },
        {
          min: 5,
          max: 12,
          message: "账号长度应在5-12之间",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 6, max: 12, message: "密码长度应在6-12之间", trigger: "blur" },
      ],
      name: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 2, max: 7, message: "用户名长度应该在2-7之间",trigger: "blur"},
      ],
      userphone :[{ required: true, message: "电话号码不能为空" ,trigger: "blur" },
        { min: 11, max: 11, message: "电话号码长度不正确",trigger: "blur"},
      ],
    });
    /**登录提交 */
    const submit_btn =()=>{
      ruleFormRefLogin.value.validate((valid:any)=>{
         loading.value=true;
          if(valid){
             setTimeout(() => {
              loading.value=false;
            store.dispatch("SET_LOGIN",loginUser).then(()=>{
              sessionStorage.setItem("token",store.state.user.token)
              ElMessage.success("登录成功，欢迎您："+store.state.user.userInfo.account);
              router.push({path:"/index"});
            }).catch(()=>{
              ElMessage.error("登录失败");
            });
             },2000);
           
          }else{
              ElMessage.error("错误提交")   
          }
      })
    } 
    /**注册提交 */
     const submit_btn1 =() => {
      loading.value=true
       ruleFormRefRegister.value.validate((valid:any) => {
        if (valid) {
          setTimeout(() => {
          loading.value=false;
          store.dispatch("SET_REGISTER",registerUser).then(()=>{
          ElMessageBox.confirm("注册成功是否登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }).then(()=>{
          sessionStorage.setItem("token",store.state.user.token)
          ElMessage.success("登录成功，欢迎您："+store.state.user.userInfo.account);
          router.push({path:"/index"});
        })
          
        })
        }, 2000)
          
        } else {
          ElMessage.warning("请检查各项数据是否正确")
        }
      });
    };
    return {
      check,
      flag,
      signUpMode,
      loginUser,
      registerUser,
      ruleFormRefLogin,
      ruleFormRefRegister,
      rules,
      rules1,
      submit_btn,
      submit_btn1,
      loading
    };
  },
};
</script>
<style scoped>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
body,
.message,
.form,
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body {
  height: 100vh;
  font-family: "Source Sans Pro", sans-serif;
  overflow: hidden;
}
.container {
  margin: 10% auto;
  width: 700px;
  height: 400px;
  background: white;
  position: relative;
  display: grid;
  grid-template: 100% / 50% 50%;
  box-shadow: 2px 20px 30px 0 rgba(51, 51, 51, 0.2);
}
.message {
  position: absolute;
  background: white;
  width: 50%;
  height: 100%;
  transform: translateX(0);
  transition: 0.5s all ease;
  z-index: 4;
}
.message1 {
  position: absolute;
  background: white;
  width: 50%;
  height: 100%;
  transform: translateX(100%);
  transition: 0.5s all ease;
  z-index: 4;
}
.message:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 70%;
  background: #c3c3d8;
  opacity: 0;
  left: 0;
  top: 15%;
}
.message1:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 70%;
  background: #c3c3d8;
  opacity: 0;
  left: 100%;
  top: 15%;
}
.signup:before {
  opacity: 0.3;
  left: 0;
}
.login:before {
  opacity: 0.3;
  left: 100%;
}
.btn-wrapper {
  width: 60%;
}
.btn-wrapper1 {
  width: 60%;
  margin: 160px auto;
}
.form {
  width: 100%;
  height: 100%;
}
.form--heading {
  font-size: 18px;
  height: 50px;
  color: #809bce;
  font-family: "Playfair Display", serif;
}
form {
  width: 70%;
}
form > * {
  margin: 10px;
}
form input {
  width: 90%;
  border: 0;
  border-bottom: 1px solid rgba(195, 195, 216, 0.5);
  font-size: 13px;
  font-weight: 300;
  color: #797a9e;
  letter-spacing: 0.11em;
}
form input::placeholder {
  color: #c3c3d8;
  font-size: 10px;
}
form input:focus {
  outline: 0;
  border-bottom: 1px solid rgba(128, 155, 206, 0.7);
  transition: 0.6s all ease;
}
.button {
  width: 100%;
  height: 30px;
  border: 0;
  outline: 0;
  color: white;
  font-size: 15px;
  font-weight: 300;
  position: relative;
  z-index: 3;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #809bce, #9893da);
}
.button:hover {
  transform: translateY(4px);
  transition: 0.4s all ease;
}
.display {
  display: var(--aa);
}
@media (max-width: 750px) {
  .container {
    transform: scale(0.8);
  }
}

.elstyle {
  margin-left: -110px;
}
.elstyle input {
  width: 220px;
}
</style>
